<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <div id="app">
			  <h1>Hello App!</h1>
			  <p>
			    <router-link to="/user/foo">Go to User</router-link>
			  </p>
			  <router-view></router-view>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<script>
			    //我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件
			    //“路径参数”使用冒号 : 标记
			     	const User = {
					  template: '<div>User{{ $route.params.id }}</div>'
					}
					const router = new VueRouter({
						  routes: [
						    // 动态路径参数 以冒号开头
						    { path: '/user/:id', component: User }
						  ]
					})
		</script>
	</body>
</html>
